<template>
  <div class="service">
    <el-select v-model="value" placeholder="请选择" style="width: 100px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-input
      prefix-icon="el-icon-search"
      placeholder="请输入内容"
      style="width: 200px"
      v-model="input"
      clearable
    >
    </el-input>
    <el-button
      type="success"
      icon="el-icon-search"
      style="width: 80px; margin-left: 10px"
      @click="handleSearch()"
      >搜索</el-button
    >
    <el-button
      type="primary"
      icon="el-icon-plus"
      style="width: 120px; float: right"
      @click="onhandAdd"
      >添加服务</el-button
    >
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="serviceName"
        label="名称"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="serviceType"
        label="品类"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="serviceDate"
        label="排期"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="serviceWeightStandard"
        label="适用规格"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="serviceServiceStandard"
        label="服务规格"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="serviceTime"
        label="耗时"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="serviceLevel"
        label="服务员等级"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="servicePrice"
        label="价格"
        align="center"
        width="100px"
      >
      </el-table-column>
      <el-table-column align="center" label="操作" style="width: 200px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-edit"
            style="width: 80px"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            style="width: 80px"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.pageNo"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="this.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="refRuleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="名称" prop="serviceName">
          <el-input v-model="ruleForm.serviceName"></el-input>
        </el-form-item>
        <el-form-item label="品类" prop="serviceType">
          <el-input v-model="ruleForm.serviceType"></el-input>
        </el-form-item>
        <el-form-item label="排期" prop="serviceDate">
          <el-input v-model="ruleForm.serviceDate"></el-input>
        </el-form-item>
        <el-form-item label="适用规格" prop="serviceWeightStandard">
          <el-input v-model="ruleForm.serviceWeightStandard"></el-input>
        </el-form-item>
        <el-form-item label="服务规格" prop="serviceServiceStandard">
          <el-input v-model="ruleForm.serviceServiceStandard"></el-input>
        </el-form-item>
        <el-form-item label="耗时" prop="serviceTime">
          <el-input v-model="ruleForm.serviceTime"></el-input>
        </el-form-item>
        <el-form-item label="服务员等级" prop="serviceLevel">
          <el-input v-model="ruleForm.serviceLevel"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="servicePrice">
          <el-input v-model="ruleForm.servicePrice"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleConfirm()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getServiceList,
  deleteService,
  addService,
  updateService,
} from "@/services/Service.js";
export default {
  data() {
    return {
      resp: null,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      input: "",
      options: [
        {
          value: "serviceName",
          label: "名称",
        },
        {
          value: "serviceType",
          label: "品类",
        },
        {
          value: "serviceDate",
          label: "排期",
        },
      ],
      value: "",
      dialogVisible: false,
      title: "",
      ruleForm: {
        serviceName: "",
        serviceType: "",
        serviceDate: "",
        serviceWeightStandard: "",
        serviceServiceStandard: "",
        serviceTime: "",
        serviceLevel: "",
        servicePrice: "",
      },
      allid: "",
      // 验证规则
      rules: {
        serviceName: [
          { required: true, message: "请输入服务名称", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        serviceType: [
          { required: true, message: "请输入服务品类", trigger: "blur" },
        ],
        serviceDate: [
          { required: true, message: "请输入排期", trigger: "blur" },
        ],
        serviceWeightStandard: [
          { required: true, message: "请输入适用规格", trigger: "blur" },
        ],
        serviceServiceStandard: [
          { required: true, message: "请输入服务规格", trigger: "blur" },
        ],
        serviceTime: [
          { required: true, message: "请输入服务耗时", trigger: "blur" },
        ],
        serviceLevel: [
          { required: true, message: "请输入服务员等级", trigger: "blur" },
        ],
        servicePrice: [
          { required: true, message: "请输入服务价格", trigger: "blur" },
        ],
      },
    };
  },
  async created() {
    this.tableList();
  },
  methods: {
    async tableList() {
      var resp = await getServiceList(
        null,
        null,
        null,
        this.pageNo,
        this.pageSize
      );
      this.tableData = resp.data.list;
      this.total = resp.data.total;
    },
    async handleSearch() {
      var resp = null;
      if (this.value === "serviceName") {
        resp = await getServiceList(
          this.input,
          null,
          null,
          this.pageNo,
          this.pageSize
        );
      } else if (this.value === "serviceType") {
        resp = await getServiceList(
          null,
          this.input,
          null,
          this.pageNo,
          this.pageSize
        );
      } else if (this.value === "serviceDate") {
        resp = await getServiceList(
          null,
          null,
          this.input,
          this.pageNo,
          this.pageSize
        );
      } else if (this.value === "") {
        resp = await getServiceList(
          null,
          null,
          null,
          this.pageNo,
          this.pageSize
        );
      }
      this.tableData = resp.data.list;
      this.total = resp.data.total;
    },
    async handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      var resp = await getServiceList(
        null,
        null,
        null,
        this.pageNo,
        this.pageSize
      );
      this.tableData = resp.data.list;
      this.total = resp.data.total;
    },
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      var resp = await getServiceList(
        null,
        null,
        null,
        this.pageNo,
        this.pageSize
      );
      this.tableData = resp.data.list;
      this.total = resp.data.total;
    },
    async handleDelete(index, row) {
      console.log(index);
      console.log(row);
      var flag = await deleteService(row.serviceId);
      //   this.deleteRow(index,row);
      if (flag) {
        var resp = await getServiceList(
          null,
          null,
          null,
          this.pageNo,
          this.pageSize
        );
        this.tableData = resp.data.list;
        this.total = resp.data.total;
        this.$message({
          message: "删除成功！",
          type: "success",
        });
      } else {
        this.$message.error("删除失败！");
      }
    },
    // 新增
    onhandAdd() {
      this.title = "添加服务";
      this.allid = "";
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row.serviceId);
      this.dialogVisible = true; //显示弹框
      this.ruleForm = row; //row当前行数据，把当前行的数据赋值给 表单
      this.allid = row.serviceId; //把id存全局
      this.title = "修改服务";
    },
    // 确定
    async dialogVisibleConfirm() {
      // 新增接口
      if (!this.allid) {
        var resp = await addService(this.ruleForm);
        console.log(resp);
        if (resp.data == true) {
          this.$message.success("添加成功"); //新增成功消息提示
          this.$refs.refRuleForm.resetFields(); //清空表格数据
          this.dialogVisible = false; //关闭弹框
          this.tableList();
        } else {
          this.$message.error("添加失败");
        }
      } else {
        // 修改接口
        let id = this.allid;
        var resp = await updateService(id, this.ruleForm);
        if (resp.data == true) {
          this.$message.success("修改成功"); //编辑成功消息提示
          this.$refs.refRuleForm.resetFields(); //清空表格数据
          this.dialogVisible = false; //关闭弹框
          this.tableList();
        } else {
          this.$message.error("修改失败");
        }
      }
    },
  },
  watch: {},
};
</script>